<template>
    <div class="imageinfoContainer">
      <!-- 顶部信息、描述 -->
      <section class="top">
          <h3 class="title">{{imageInfo.title}}</h3>
          <p class="subinfo">
              <span class="author">发布者：{{imageInfo.author}}</span>
              <span class="add_time">时间：{{imageInfo.add_time | dateFormat}}</span>
              <span class="click_count">阅读量：{{imageInfo.click_count}}</span>
          </p>
      </section>
      <!-- 简介 -->
      <section class="abstract">
          <p v-html="imageInfo.abstract"></p>
      </section>
      <!-- 缩略图 -->
      <section class="thumbs">
          <!-- vue-preview用法：1.npm下载；2.导入 3.Vue.use()4.sliders="",5.在业务逻辑中ajax获取数据-->
          <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview>
      </section>
      <!-- 评论区 -->
      <section class="cmt">
        <comment :id="this.imgId"></comment>
      </section>

    </div>
</template>
<script>
import Toast from 'mint-ui';
import comment from '../subComponemts/comment.vue'//导入评论组件
export default {
    data(){
        return{
            imgId:this.$route.params.id,
            imageInfo:{},
            thumbsList:[],
        }
    },
    created(){
         this.getimageInfo();
         this.getThumbsList();
    },
    methods:{
        //获取该组图片的基本信息
         getimageInfo(){
             this.$ajax({
                 method:'get',
                 url:'/images/imagesinfo',
                 params:{
                     imgid:this.imgId,
                 }
             }).
             then(response=>{
              var data = response.data;
              if(data.Status ==0){
                  this.imageInfo = data.Data[0];
                  console.log(this.imageInfo)
              }else{
                   Toast('服务端获取图片信息失败');
              }
             })
         },
         //获取图片缩略图
         getThumbsList(){
        this.$ajax({
           method:'get',
           url:'/thumbs/'+this.imgId,
        }).
        then(response =>{
          var data = response.data;
          if(data.Status == 0){
              data.Data.forEach(item =>{
                  item.w = 600,
                  item.h = 400,
                  item.src = item.img_url,
                  item.msrc = item.img_url;
              })
              this.thumbsList = data.Data;
          }else{
              Toast('获取图片缩略图失败')
          }
        })
         }
    },
    components:{
        comment
    }
}
</script>
<style lang="less">
.imageinfoContainer{
    padding: 10px;
    .top{
        border-bottom: 1px solid #bbb;
        .title{
            font-size: 20px;
            color:#333;
            font-family: "微软雅黑";
            text-align: center;
        }
        .subinfo{
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin: 0;
        }
    }
    .abstract{
        font-size: 14px;
        padding: 10px;
        color:#444;
        text-indent: 2em;
        line-height: 22px;
    }
    .thumbs{
        .imgPrev{
            .my-gallery{
                figure{
                    display: inline-block;
                    margin: 9px;
                    img{
                        width: 80px;
                        height: 60px;
                    }
                }
            }
        }
    }
}
</style>